<template>
  <div>
    <van-popup v-model:show="isShow" position="bottom">
      <div class="workBench-writing">
        <div class="workBench-writing-controlBar">
          <van-nav-bar left-arrow @click-left="backStep">
            <template #right>
              <div class="workBench-buttons" v-if="nowStep == 0">
                <van-button type="primary" @touchend="nowStep++;theData={...theData,content:{html:valueHtml,text:editorRef.getText()}}">下一步</van-button>
              </div>
              <div class="workBench-buttons" v-else-if="nowStep == 1">
                <van-button type="primary" @touchend="nowStep--">上一步</van-button>
                <van-button type="primary" @touchend="handleNextStep">下一步</van-button>
              </div>
              <div class="workBench-buttons"  v-else-if="nowStep == 2">
                <van-button type="primary" @touchend="nowStep--">上一步</van-button>
                <van-button type="primary" @touchend="handleSubmit">提交</van-button>
              </div>
            </template>
          </van-nav-bar>
        </div>
        <div class="workBench-writing-editor" v-if="nowStep == 0">
          <div class="toolbar">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
          </div>
          <div class="editor">
            <Editor
              class="editor"
              style="overflow-y: hidden"
              v-model="valueHtml"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
            />
          </div>
        </div>
        <div class="workBench-writing-editor-steps" v-else-if="nowStep == 1">
          <van-cell-group style="marginBottom:10px">
            <van-cell title="封面" size="large">
              <template #extra>
                <van-uploader :after-read="afterRead">
                  <div class="coverUrlEdit">
                      <div class="uuh-icon">
                        <van-image width="50px" height="50px" round :src="coverUrl.content" />
                      </div>
                      <div class="uuh-link">
                        <van-icon size="20" name="arrow"/>
                      </div>
                  </div>
                </van-uploader>
              </template>
            </van-cell>
          </van-cell-group>
          <van-cell-group>
            <van-cell title="标题" size="large" is-link :value="title" @click="typeTitle=true"/>
            <van-action-sheet v-model:show="typeTitle">
              <div class="titleEdit">
                <van-field name="userDesc" v-model="title" rows="3" autosize type="textarea" maxlength="50" show-word-limit />
                <van-button type="primary" @click="typeTitle=false">确认</van-button>
              </div>
            </van-action-sheet>
            <van-cell title="标签" size="large" is-link @click="typeTag=true" :value="tag"/>
            <van-action-sheet v-model:show="typeTag" :actions="actionsTag" cancel-text="取消" @select="handleSelect" close-on-click-action>
            </van-action-sheet>
          </van-cell-group>
        </div>
        <div class="workBench-writing-editor-steps" v-else-if="nowStep == 2">
          <div class="passenger-Title">
            <h1>
              {{
                theData.title
              }}
            </h1>
          </div>
          <div class="passenger-Cover">
            <img :src="theData.coverUrl.content">
          </div>
          <div class="passenger-Content">
            <div class="editor-content-view" v-html="theData.content.html">
            </div>
          </div>
          <div class="passenger-Tag">
            <div class="passenger-Tag-icon">
              <van-icon class-prefix="aliIconfont" name="icon-biaoqian" size="25px"/>
            </div>
            <div class="passenger-Tag-text">
              {{
                theData.tag
              }}
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Button, Popup, NavBar, ActionSheet, Cell, CellGroup, Field, Image as VanImage, Icon, Uploader,Toast } from "vant";
import { onBeforeUnmount, ref, toRef, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { addArticle, getHobby } from "@/service/user";
/* import { DomEditor } from '@wangeditor/editor' */
/* import { useStore } from "vuex"; */
import '@wangeditor/editor/dist/css/style.css';
import "@/assets/css/editor-style.less";

export default {
  setup(props){
    const editorRef = shallowRef();
    const valueHtml = ref('');
    const isShow = toRef(props,'isWritingShow')
    const toolbarConfig = {
      excludeKeys:[
        'blockquote',
        'underline',
        'bulletedList',
        'numberedList',
        'codeBlock',
        'through',
        'bgColor',
        'insertTable',
        'fullScreen',
        'insertLink',
        'clearStyle',
        'todo',
        'group-image',
        'insertVideo',
        'color'
      ]
    }
    const editorConfig = { placeholder: '请输入内容...' }
    const handleCreated = (editor) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
    }
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy();
    })
    return {
      isShow,
      editorRef,
      valueHtml,
      mode: 'simple', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated
    };
  },
  components:{
    [NavBar.name]:NavBar,
    [Button.name]:Button,
    [Popup.name]:Popup,
    [ActionSheet.name]:ActionSheet,
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    [Field.name]:Field,
    [VanImage.name]:VanImage,
    [Icon.name]:Icon,
    [Uploader.name]:Uploader,
    Editor,
    Toolbar
  },
  props:['isWritingShow'],
  data(){
    return {
      nowStep:0,
      typeTitle:false,
      typeTag:false,
      title:"",
      coverUrl:"",
      actionsTag:[],
      theData:{},
      tag:""
    }
  },
  mounted(){
    getHobby().then(res=>{
      this.actionsTag = res.map(item=>{
        return {
          name:item.hobbyName
        }
      })
    })
  },
  methods:{
    backStep(){
      this.$store.commit('setIsWritingShow',false)
    },
    afterRead(file){
      this.coverUrl = file;
    },
    handleSelect(val){
      this.tag = val.name;
      this.theData = {
        ...this.theData,
        tag:val.name
      }
    },
    handleNextStep(){
      this.nowStep++;
      this.theData = {
        ...this.theData,
        coverUrl:this.coverUrl,
        title:this.title
      }
    },
    handleSubmit(){
      addArticle(this.theData).then(res=>{
        res.status == 200 ? Toast.success(res.message) : Toast.success('出错了');
        this.nowStep = 0;
        this.valueHtml = "";
        this.coverUrl = "";
        this.title = "";
        this.tag = "";
      })
    }
  }
}
</script>
<style lang="less">
.workBench-writing{
  height: 100vh;
  background: #EFEFEF;
  border: 1px solid #ccc;
  position: relative;
  box-sizing: border-box;
  position: relative;
  overflow-y:auto;
  .workBench-writing-editor{
    height:calc(100vh - 51px);
    padding-top: 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
    .toolbar{
      width: 100%;
      height: 90px;
    }
    .editor{
      flex: 1;
      width: 100%;
      overflow-y: auto;
    }
  }
  .workBench-writing-editor-steps{
    padding: 3.125rem 10px 0 10px;
    .van-cell__title{
      display: flex;
      padding-left: 1.25rem;
      align-items: center;
    }
  }
}
.workBench-writing-controlBar{
  position: fixed;
  width: 100%;
  height: 50px;
  background: #FFD260;
  top: 0;
  z-index: 999999;
}
.workBench-writing-show{
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  padding-top: 50px;
  background: #fff;
}
.workBench-buttons{
  button{
    height: 35px;
    margin: 0 4px
  }
}
.titleEdit{
  button{
    margin:0 10px 10px 0;
  }
  textarea{
    background: rgba(204, 204, 204, 0.479);
    padding: 5px 10px;
    font-size: 16px;
  }
}
.coverUrlEdit{
  display: flex;
  align-items: center;
}
.passenger-Cover{
  width: 100%;
  max-height: 180px;
  overflow: hidden;
  img{
    width: 100%;
    height: 100%;
  }
}
.passenger-Content{
  margin:8px 0;
}
.passenger-Tag{
  padding: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .passenger-Tag-text{
    margin: 0 8px;
    padding:4px 8px;
    background: silver;
    color: darkblue;
    border-radius: 5px;
  }
}
</style>